<template>
	<div class="back_contain_n screen_full" ref="screenFull">
		<div class="_top">
			<span @click="screenFullFun" class="iconfont icon-quanping1 icon_full"></span>
			<div class="_left_logo">
				<img :src="sysInfo.headImg"/>
				<!-- <img src="@/assets/back_manage_img/logo.png"> -->
			</div>
			<div class="_right_box">
				<p class="_titlens">配拌投料 无纸化动态作业</p>
				<div style="display: flex;">
					<div class="input_flex">
						<span class="search_left">生产日期：</span>
						<span>{{headInfo.dutyDay}}</span>
					</div>
					<div class="input_flex">
						<span class="search_left">班次：</span>
						<span>{{headInfo.whiteDay =='1'?'白班':'夜班'}}</span>
					</div>
					<div class="input_flex">
						<span class="search_left">班长：</span>
						<span>{{headInfo.banzhang}}</span>
					</div>
				</div>
			</div>
		</div>
		<dv-scroll-board :config="tableData" class="inline_dv_table" @click="dvTable"/>

		<div class="zll-dialog">
			<popout :title="type!=='chu'?'配拌投料':'出料'" :visible.sync="addDialog" v-if="addDialog"
					:class="type!=='chu'?'bg_Size':'long_size'">
				<add ref="add" @setRepeatFlag="setRepeatFlag" slot="content"  :editData="editData" :type="type" :isScreenfull="isScreenfull"></add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
					<p class="zll-botton" v-if="editData.plStatus== '0' ||repeatBanFlag" @click="()=>{this.$refs.add.banLiao()}">
						立即拌料</p>
					<p class="zll-botton" v-if="editData.plStatus== '2'" @click="()=>{this.$refs.add.doubleBanLiao()}">
						保存</p>
					<p class="zll-botton" v-if="type == 'chu'" @click="()=>{this.$refs.add.submitForm('addForm')}">
						出料</p>
				</template>
			</popout>
		</div>
	</div>
</template>

<script>
	import Add from './add'
	import screenfull from 'screenfull'


	export default {
		data() {
			return {
				tableLoading: true, //table刷新
				type: '',
				editData: {},

				tableData: {
					carousel: 'page',
					waitTime: 5000,
					headerBGC: '#F2F2F2',
					oddRowBGC: '#fff',
					evenRowBGC: '#F2F2F2',
					align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center',],
					headerHeight: '50',
					rowNum: 8,
					header: ['罐号', '管坯料名', '主料(kg)', '辅料(kg)', '色母(kg)', '配比', '总料重(kg)', '配料人', '拌料时段', '搅拌时长(min)', '状态', '未出料(kg)', '操作'],
					columnWidth: [80, 150, 150, 150, 150, 150, 150, 180, 250, 150, 150, 160, 150, 150,],
					data: []
				},
				headInfo:{banzhang:'',whiteDay:'',dutyDay:''},
				linePeis:[],
				addDialog: false,
				sysInfo: {
					headImg:  require('../../../../assets/back_manage_img/logo.png'),
				},
				isScreenfull: false,

				repeatBanFlag:false
			}
		},
		methods: {

			setRepeatFlag(){
				let self = this;
				self.repeatBanFlag = true;
			},

			dvTable(data) {
				let self = this;
				self.addDialog = true;
				self.repeatBanFlag = false;
				self.type = 'edit';
				self.$nextTick(() => {
					let deviceCode = data.row[0];
					let param = self.linePeis.find((item)=>item.deviceCode == deviceCode);
					self.editData = Object.assign({},param);
					console.log(self.editData)
				});
			},
			screenFullFun() {
				if (!screenfull.isEnabled) {
					// 如果不支持进入全屏，发出不支持提示
					this.$message({
						message: "您的浏览器版本过低不支持全屏显示！",
						type: "warning",
					});
					return false;
				}
				this.isScreenfull = !this.isScreenfull
				screenfull.toggle(this.$refs.screenFull);
			},

			getLinePeiListMap() {
				let self = this;
				self.headInfo = {banzhang:'',whiteDay:'',dutyDay:''};
				self.linePeis = [];
				self.$http({
					url: "/jinl/linepei/getLinePeiListMap",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						console.log(resp.result)
						self.linePeis = resp.result.linePeis||[];
						self.headInfo.dutyDay = resp.result.dutyDay;
						self.headInfo.whiteDay = resp.result.whiteDay;
						self.headInfo.banzhang = resp.result.banzhang;
						let allDatas = [];
						for(let data of self.linePeis){
							let tables = [];
							let plStatus = data.plStatus||'0';
							tables[0] = data.deviceCode||'';
							tables[1] = data.gpName||'';
							tables[2] = data.zlValue||'';
							tables[3] = data.flValue||'';
							tables[4] = data.smValue||'';
							tables[5] = data.ratios||'';
							tables[6] = data.totalValue||'';
							tables[7] = data.plUserName||'';
							tables[8] = '<span class="_times" title="' + (data.banTimePeriod||'') + '">' + (data.banTimePeriod||'') + '</span>';
							tables[9] = data.banTimeCount||'';
							if(tables[9]){
								let time = parseFloat(tables[9])/60.0;
								tables[9] = time.toFixed(2);
							}
							tables[11] = data.unOutValue||'';
							if (plStatus == '0') {
								tables[10] = '<span class="aa_tag_inline grey">' + data.plStatusCn + '</span>';
								tables[12] = '<span class="_edit">配料</span>'
							} else if (plStatus== '1') {
								tables[10] = '<span class="aa_tag_inline green">' + data.plStatusCn + '</span>';
								tables[12] = '<span class="_edit">查看</span>'
							}else if (plStatus== '2') {
								tables[10] = '<span class="aa_tag_inline red">' + data.plStatusCn + '</span>';
								tables[12] = '<span class="_edit">二次配料</span>'
							} else if (plStatus == '3') {
								tables[10] = '<span class="aa_tag_inline">' + data.plStatusCn + '</span>';
								tables[12] = '<span class="_edit">出料</span>'
							} else if (plStatus == '4') {
								tables[10] = '<span class="aa_tag_inline green">' + data.plStatusCn + '</span>';
								tables[12] = '<span class="_edit">重新配料</span>'
							}
							allDatas.push(tables);
						}
						self.tableData.data = JSON.parse(JSON.stringify(allDatas));
						self.tableData = Object.assign({},self.tableData);
					}
				});
			},
			getSysHeadImg() {
				let self = this;
				self.$http({
					url: "/jinl/file/api/queryFileList?",
					method: "post",
					params:{type:'4',}
				}).then(resp => {
					if (resp.success) {
						if(resp.result.length > 0){
							self.sysInfo.headImg = resp.result[0].fileUrl;
						}

					}
				});
			},
		},
		mounted() {
			let self = this;
			self.getLinePeiListMap();
			self.getSysHeadImg()
			self.$eventBus.$on("updateLinePeiList", function () {
				self.addDialog = false;
				self.getLinePeiListMap()
			})
		},
		components: {
			Add
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	@font-face {
		font-family: 'fonta';
		src: url(../../../../style/fontFamily.ttf);
	}

	.inline_dv_table {
		height: calc(100vh - 170px);
	}

	._top {
		padding: 20px;
		background: #020935;
		display: flex;
		color: #00d1d0;
		position: relative;
		height: 120px;

		.icon_full {
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 28px;
			color: #fff;
		}

		._left_logo {
			border-right: 1px solid #eee;
			width: 230px;
			font-size: 14px;
			text-align: center;
			padding-right: 20px;

			img {
				width: 100%;height: 100%;
			}
		}

		._right_box {
			width: calc(100% - 231px);
			padding: 0 20px;

			._titlens {
				font-size: 46px;
				font-family: fonta;
				color: #fff;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.input_flex {
				display: flex;
				align-items: flex-start;
				width: 160px;
				line-height: 26px;
				font-size: 14px;

				.search_left {
					width: 72px;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>